<template>
  <div class="login-container">
    <Header />
    
    <el-card class="login-card">
      <div slot="header">
        <span>用户登录</span>
      </div>
      
      <el-form 
        :model="loginForm" 
        :rules="rules"
        ref="loginForm" 
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <router-link to="/register" class="register-link">
            <el-button type="text">还没有账号?立即注册</el-button>
          </router-link>
        </el-form-item>
      </el-form>
    </el-card>

    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Main/Header.vue'
import Footer from '@/components/Main/Footer.vue'

export default {
  name: 'Login',
  components: {
    Header,
    Footer
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        remember: false
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            const res = await this.$axios.post('/api/login', this.loginForm)
            if (res.data.code === 0) {
              this.$message.success('登录成功')
              this.$router.push('/')
            } else {
              this.$message.error(res.data.message)
            }
          } catch (error) {
            this.$message.error('登录失败,请稍后重试')
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: #f5f7fa;
}

.login-card {
  width: 480px;
  margin: 60px auto;
}

.register-link {
  float: right;
  padding-top: 7px;
}
</style> 